<template>
  <div class="relative inline" ref="self" @click="onClick">
    <Transition
      appear
      enter-active-class="transition duration-300 ease-in"
      enter-from-class="opacity-0"
      enter-to-class="opacity-100"
    >
      <div
        v-if="show"
        ref="el"
        class="min-w-50 absolute -top-24 bg-white border-1 p-2 border-gray-200 rounded-lg shadow-xl z-10"
      >
        <div class="mb-2 flex items-center">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-6 h-6 text-orange-500 mr-2"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <use :xlink:href="`#z-icons-warning`" />
          </svg>
          {{ title }}
        </div>
        <hr class="my-4" />
        <div class="flex justify-end space-x-1">
          <ZButton
            v-if="cancelButton"
            class="bg-orange-500 hover:bg-orange-300"
            size="small"
            @click="cancel"
          >
            {{ cancelText }}
          </ZButton>
          <ZButton size="small" @click="ok">{{ okText }}</ZButton>
        </div>
      </div>
    </Transition>
    <slot></slot>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import { onClickOutside } from "@vueuse/core";
import ZButton from "./ZButton.vue";

export default defineComponent({
  name: "ZPopConfirm",
  components: {
    ZButton,
  },
  props: {
    title: String,
    okText: {
      type: String,
      default: "确定",
    },
    cancelButton: Boolean,
    cancelText: {
      default: "取消",
    },
  },
  emits: ["update:show", "ok", "cancel"],
  setup(props, { emit }) {
    const el = ref<HTMLDivElement>(),
      self = ref<HTMLElement>(),
      show = ref(false),
      cancel = () => {
        show.value = false;
        emit("cancel");
      },
      ok = () => {
        show.value = false;
        emit("ok");
      },
      onClick = (event: MouseEvent) => {
        if (event.target == self.value) return;
        show.value = true;
      };
    onClickOutside(el, cancel);
    return {
      el,
      self,
      show,
      ok,
      cancel,
      onClick,
    };
  },
});
</script>
